<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet"
          href="/plugins/select2/css/select2.min.css">
    <link rel="stylesheet"
          href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <th:block data-th-replace="/adminlte/base::base-head"></th:block>
    <style type="text/css">
        #user-table td {
            vertical-align: middle;
            text-align: center;
        }

        #user-table th {
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed"
      th:with="roleList=${roleUtils==null?null:roleUtils.getAll()}">
<div class="wrapper">
    <th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
    <th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
    <div class="modal fade" id="dialog-user-set">
        <div class="modal-dialog">
            <div class="modal-content"
                 style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
                <div class="modal-header">
                    <h4 class="modal-title" data-t="nickname">用户角色</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form role="form" action="/users/role/" method="put" data-action="id" data-dialog-close="#dialog-user-set">
                    <input type="hidden" data-v="select" id="selectId"/>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>请选择一个角色</label>
							<select class="form-control select2" name="roleId">
								<option data-th-each="role:${roleList}" th:utext="${role.name+'('+role.remark+')'}" th:value="${role.id}">
								</option>
                        	</select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default float-left" data-dismiss="modal"
                                style="width: 100px" type="button">取消
                        </button>
                        <button class="btn btn-success float-right" style="width: 100px"
                                type="submit">确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="row mt-2">
                            <div class="w-100"></div>
                            <div class="input-group mx-2 mb-2">
                                <div class="input-group-prepend">
                                    <button type="submit" class="btn btn-default"
                                            data-get-search="#search-user" onclick="changeThis(this)">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <input id="search-user" type="text" name="table_search"
                                       class="form-control" placeholder="Search"
                                       autofocus="autofocus" data-get-search="#search-user"
                                       onkeyup="enterThis(this, changeThis)">
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="user-table"
                                   class="table table-bordered table-hover table-striped">
                                <colgroup>
                                    <col width="80"/>
                                    <col width="100"/>
                                    <col/>
                                    <col width="110"/>
                                    <col width="100"/>
                                    <col width="120"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>用户头像</th>
                                    <th style="text-align: left;">用户昵称</th>
                                    <th>用户角色</th>
                                    <th>用户性别</th>
                                    <th>用户管理</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr data-th-each="user: ${userPage.data}">
                                    <td data-th-utext="${user.id}">ID</td>
                                    <td>
                                        <div>
                                            <img data-tag="userImage" th:src="${user.image}"
                                                 class="img-circle"
                                                 style="width: 40px; height: 40px; object-fit: cover; cursor: pointer;"
                                                 alt="User Image"
                                                 th:data-href="${'/admin/user/'+user.id}">
                                        </div>
                                    </td>
                                    <td style="text-align: left;"
                                        data-th-utext="${user.nickname}">用户名
                                    </td>
                                    <td>
										<a th:href="${'/admin/user?roleId='+user.roleId}"
                                            th:utext="${roleUtils!=null?roleUtils.getName(user.roleId):''}">
                                    	</a>
									</td>
                                    <td>
										<a th:href="${'/admin/user?gender='+user.gender}"
                                            th:utext="${user.gender.toString()}"> </a>
										</td>
                                    <td class="td-manage">
										<a class="mr-2" title="用户信息" th:href="${'/admin/user/'+user.id}">
											<i class="fas fa-user-edit text-blue"></i>
                                    	</a>
                                        
										<a title="设置角色" th:if="${roleList!=null}"
										    data-dialog="show"
										    data-url="#dialog-user-set"
										    th:data-dialog-v-select="${user.roleId}"
                                            th:data-dialog-t-nickname="${user.nickname}"
                                            th:data-dialog-action-id="${user.id}">
											<i class="fas fa-user-cog text-blue"></i>
                                    	</a>
										<a title="删除" th:if="${user.id!=1}"
										    data-dialog="confirm"
										    data-url="/users"
										    data-method="delete"
										    th:data-arr-id="${user.id}"
                                            data-handle="data.id"
                                            data-dialog-t-msg="您确定要删除当前用户吗？">
                                        	<i class="fas fa-user-minus text-blue" style="margin-left: 10px;"></i>
                                    	</a>
									</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <th:block data-th-replace="/adminlte/base::pageNav(${userPage},'个用户')"></th:block>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <th:block data-th-replace="/adminlte/base::base-footer"></th:block>
    <th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/kaibes/js/extend.js"></script>
<script src="/plugins/select2/js/select2.full.min.js"></script>
</body>
</html>